<template>
	<view id="sixinlist">
		<!-- 按组使用 -->
		<uni-swipe-action class="ul">
			<uni-swipe-action-item v-for="item of itemArr" @change="change(item.id)" :options="options1" @click="onClick" :key="item.id">
				<view :class='item.isRead?"cont isactive":"cont"'>{{item.title}}</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		data() {
			return {
				itemArr:[{id:'1111',title:"消息1",isRead:false},{id:'2222222',title:"消息2",isRead:false},{id:'3333333',title:"消息4",isRead:true},{id:'444444',title:"消息3",isRead:true}],
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				delId:"",
			}
		},
		methods: {
			onClick(e) {
				console.log(e);
				console.log(`删除id为：${this.delId}`);
				console.log('当前点击的是第' + e.index + '个按钮，点击内容是' + e.content.text)
			},
			change(open) {
				this.delId = open;
				console.log('当前开启状态：' + open);
			}
		},
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		}
	}
</script>

<style lang="less">
	#sixinlist {
		width: 100vw;
		padding: 20rpx;
		background-color: #D8D8D8;

		.ul {
			background-color: #efeff4;
		}

		.uni-swipe {
			border-bottom: 2rpx solid #c8c7cc;
			.uni-swipe_content {
				.uni-swipe_move-box {
					.uni-swipe_box {
						.cont {
							padding: 5rpx 20rpx;
							line-height: 80rpx;
						}
						.isactive{
							color: #B2B2B2;
						}
					}

					.uni-swipe_button-group {
						.uni-swipe_button {
							.uni-swipe_button-text {}
						}
					}
				}
			}

			// .uni-swipe_box{
			// 	line-height: 80rpx;
			// 	height: 80rpx;
			// 	background-color: #DD524D;
			// }
			// .uni-swipe_button{
			// 	height: 100%;
			// }
		}
	}
</style>
